<template>
    <div class="">
        <n-input
            v-model:value="content"
            class="w-full"
            type="textarea"
            placeholder="来说点什么吧"
        ></n-input>
        <div
            class="w-full box-border p-10px flex justify-between items-center"
            style="border-bottom: solid 1px #e5e5e5"
        >
            <div class="flex items-center">
                <div class="font-size-0.8rem w-100px">谁可以见:</div>
                <n-select
                    v-model:value="visibleTo"
                    :options="options"
                    placeholder="请选择"
                    size="tiny"
                >
                </n-select>
            </div>
            <n-button type="primary" size="small" :focusable="false" @click="handlePublish">
                发布
            </n-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { MomentDto } from '@/service/types/moment'
import { ref } from 'vue'

const emits = defineEmits<{
    publish: [MomentDto]
}>()

const visibleTo = ref('all')
const options = [
    { label: '所有人', value: 'all' },
    { label: '仅自己', value: 'self' },
]

const content = ref('')

const handlePublish = () => {
    if (content.value.trim() === '') {
        window.NMessage.warning('内容不能为空')
        return
    }
    const user = JSON.parse(localStorage.getItem('user') ?? '{}')
    const dto: MomentDto = {
        content: content.value,
        posterId: user.id,
        title: '',
        status: visibleTo.value === 'all' ? 0 : 1,
    }
    emits('publish', dto)
}
</script>

<style scoped>
:deep(.n-input-wrapper) {
    height: 200px !important;
    resize: none !important;
}
</style>
